<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Models</title>

  <!-- 引入Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- <link rel="stylesheet" href="css/bootstrap.css"> -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- <link rel="stylesheet" href="css/style.css"> -->
  <link rel="stylesheet" href="./test.css">
  <link rel="stylesheet" href="css/style.css">


  <!-- 引入字体样式库 -->
  <!-- Web-Fonts -->
  <link href="http://fonts.googleapis.com/css?family=Srisakdi:400,700&amp;subset=latin-ext,thai,vietnamese"
    rel="stylesheet">
  <link
    href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext"
    rel="stylesheet">
  <!-- //Web-Fonts -->
</head>

<body>
  <!-- 头部开始-->
  <div class="main-top" id="home">
    <!-- header -->
    <header>
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">menu
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">Models</a>


        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Gallery</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">Dropdown <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
    </header>
    <!-- //header -->
  </div>

  <div class="container-fluid">
    <!-- 轮播图start -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel ">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="./images/2.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h5>THE EASIER WAY TO FIND MODELS</h5>
              <h3>Discover Models Or Be Discovered</h3>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">CONTACT US</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="./images/1.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h5>THE EASIER WAY TO FIND MODELS</h5>
              <h3>Discover Models Or Be Discovered</h3>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">CONTACT US</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="./images/4.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h5>THE EASIER WAY TO FIND MODELS</h5>
              <h3>Discover Models Or Be Discovered</h3>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">CONTACT US</a></p>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /.carousel -->
  </div>
  <!-- 轮播图end-->

  <!-- welcome start -->
  <div class="welcome">
    <div class="container">
      <div class="row">
        <div class="col-md-6 welcome-left">
          <h3>Welcome To Our Models Website</h3>
          <h4>Together we’ll make this world
            more beautiful.</h4>
          <div class="row zuo-bottom">
            <div class="zuo-gird">
              <div class="effect">
                <span class="spiner glyphicon glyphicon-ok-circle"></span>
              </div>
              <h5>Make Over</h5>
              <p>Ut enim ad minima ven aiam,
                quis no strum ullam corp
                oris susc ipit.</p>
            </div>
            <div class="you-gird">
              <div class="effect">
                <span class="spiner glyphicon glyphicon-star-empty"></span>
              </div>
              <h5>Make Over</h5>
              <p>Ut enim ad minima ven aiam,
                quis no strum ullam corp
                oris susc ipit.</p>
            </div>
          </div>
        </div>
        <div class="col-md-6 welcome-right">
          <img src="./images/img.jpg" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </div>
  <!-- welcome end -->

  <!-- 三框 -->
  <div class="seriver">
  <div class="container pad">
    <div class="row">
      <div class="col-lg-4 seriver-gird">
        <i class="fa fa-eye" aria-hidden="true"></i>
        <h4>HEADING HERE</h4>
        <p>Ut enim ad minima veniam,
           quis nostrum ullam corporis 
           suscipit laboriosam.</p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4 seriver-gird">
        <i class="fa fa-gift" aria-hidden="true"></i>
          <h4>HEADING HERE</h4>
          <p>Ut enim ad minima veniam,
            quis nostrum ullam corporis 
            suscipit laboriosam.</p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4 seriver-gird">
        <i class="fa fa-heart-o" aria-hidden="true"></i>
          <h4>HEADING HERE</h4>
          <p>Ut enim ad minima veniam,
            quis nostrum ullam corporis 
            suscipit laboriosam.</p>
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->
  </div>
</div>

<!-- blog -->
<div class="blog">
  <div class="container bb">
    <div class="title text-center">
      <h3>Blog Posts</h3>
      <p>Ut enim ad minim veniam, quis nostrud ullam.</p>
    </div>

    <div class="row">
        <div class="col-lg-4 two">
          <div class="img">
            <img src="./images/blog1.jpg" alt="">
            <h3>13
              <span>Sep</span>
            </h3>
          </div>
         
          <h4>Sit accus antium</h4>
          <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4 two">
          <div class="my">
          <div class="img">
            <img src="./images/blog2.jpg" alt="">
            <h3>16
              <span>Sep</span>
            </h3>
          </div>
          <h4>Sit accus antium</h4>
          <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
        </div>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4 two">
          <div class="img">
            <img src="./images/blog3.jpg" alt="">
            <h3>20
              <span>Sep</span>
            </h3>
          </div>
          <h4>Sit accus antium</h4>
          <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
    </div>
  </div>
</div>

<section class="w3ls-bnrbtm " id="middle">
  <div class="container">
    <div class="row">
      <div class="col-xl-5 col-lg-7 wline">
        <span class="w3-line text-uppercase">Fashion Look</span>
        <h3 class="agile-title">Creating Your Beauty Image</h3>
        <p class="text-botm">Donec consequat sapien ut leo cursus rhoncus. Nullam dui mi, vulputate ac metus at</p>
      </div>
    </div>
  </div>
</section>

<div class="gallery" id="gallery">
  <div class="container py-xl-5 py-lg-3">
    <div class="title text-center mb-5">
      <h3 class="mb-2">Our Gallery</h3>
      <p>Ut enim ad minim veniam, quis nostrud ullam.</p>
    </div>
    <div class="news-grids gal text-center">
      <div class="d-md-flex">
        <div class="col-xs-12 col-md-4 gal-img mt-4">
          <a href="#gal1"><img src="./images/g1.jpg" alt="news image" class="img-fluid"></a>
        </div>
        <div class="col-xs-12 col-md-4 gal-img my-md-0 mt-4">
          <a href="#gal2"><img src="./images/g2.jpg" alt="news image" class="img-fluid"></a>
        </div>
        <div class="col-xs-12 col-md-4 gal-img mt-4">
          <a href="#gal3"><img src="./images/g3.jpg" alt="news image" class="img-fluid"></a>
        </div>
      </div>
      <div class="d-md-flex mt-4">
        <div class="col-xs-12 col-md-4 gal-img mt-4">
          <a href="#gal4"><img src="./images/g4.jpg" alt="news image" class="img-fluid"></a>
        </div>
        <div class="col-xs-12 col-md-4 gal-img my-md-0 mt-4">
          <a href="#gal5"><img src="./images/g5.jpg" alt="news image" class="img-fluid"></a>
        </div>
        <div class="col-xs-12 col-md-4 gal-img mt-4">
          <a href="#gal6"><img src="./images/g6.jpg" alt="news image" class="img-fluid"></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="new py-5" id="newsletter">
  <div class="container conn">
    <div class="title news-titl text-center mb-5">
      <h3 class="mb-2">Our Newsletter</h3>
      <p>Ut enim ad minim veniam, quis nostrud ullam.</p>
    </div>
    <div class="ns">
      <form action="#" method="post">
        <div class="row">
          <div class="col-xs-12 col-md-4 form-group">
            <input class="form-control" type="text" name="Name" placeholder="Name" required="">
          </div>
          <div class="col-xs-12 col-md-4 form-group">
            <input class="form-control" type="email" name="Email" placeholder=" Email Address" required="">
          </div>
          <div class="col-xs-12 col-md-4 form-group">
            <input class="form-control submit text-uppercase" type="submit" value="Subscribe">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="address py-5" id="contact">
  <div class="container py-xl-5 py-lg-3">
    <div class="title text-center">
      <h3>Contact Us</h3>
      <p>Ut enim ad minim veniam, quis nostrud ullam.</p>
    </div>
    <div class="row address-row">
      <div class="col-lg-6 address-right">
        <div class="address-info wow fadeInRight animated" data-wow-delay=".5s">
          <h4>Address</h4>
          <p>123 San Sebastian, Hill Towers 4567 New York City USA.</p>
        </div>
        <div class="address-info address-mdl wow fadeInRight animated" data-wow-delay=".7s">
          <h4 >Phone </h4>
          <p>+800 8200 8820</p>
          <p>+800 8200 8820</p>
        </div>
        <div class="address-info agileits-info wow fadeInRight animated" data-wow-delay=".6s">
          <h4>Mail</h4>
          <p>
            <a href="mailto:example@mail.com"> GOOdWORld@example.com</a>
          </p>
          <p>
            <a href="mailto:example@mail.com"> BIBIBdasdh@example.com</a>
          </p>
        </div>
      </div>
      <div class="col-lg-6 address-left mt-lg-0 mt-5">
        <div class="address-grid">
          <h4 class="mb-3">Get In Touch</h4>
          <form action="#" method="post">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Name" name="name" required="">
            </div>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Email" name="email" required="">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Subject" name="subject" required="">
            </div>
            <div class="form-group">
              <textarea placeholder="Message" class="form-control" required=""></textarea>
            </div>
            <input type="submit" value="SEND">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 底部start -->
<div class="footer">
  <div class="container py">
    <div class="row">
      <div class="col-sm-6 col-lg-3 footer-gird">
        <h3 class="foot-title">WHO WE ARE</h3>
        <div class="contact-info">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
            aperiam, eaque ipsa quae.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 footer-gird">
        <h3 class="foot-title">LATEST NEWS</h3>
        <div class="contact-info">
						<div class="info-date">
							<h4>Sed ut piciatis unde</h4>
							<p>30 Sep 2018</p>
						</div>
						<div class="info-date">
							<h4>Modi tempra incunt</h4>
							<p>02 Aug 2018</p>
						</div>
						<div class="info-date">
							<h4 >ullam corpis sucipit</h4>
							<p>06 Aug 2018</p>
						</div>
					</div>
      </div>
      <div class="col-sm-6 col-lg-3 footer-gird">
        <h3 class="foot-title">CONTACT US</h3>
        <div class="contact-info">
          <div class="info-date">
            <h4>Phone</h4>
            <p>+121 098 9807 9987</p>
          </div>
          <div class="info-date">
            <h4>Email</h4>
            <p>info@example.com</p>
          </div>
          <div class="info-date">
            <h4 >Location</h4>
            <p>Honey Avenue,New York City</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 footer-gird">
        <h3 class="foot-title">Quick Links</h3>
        <ul class="foot-link">
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="#">About Us</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li>
            <a href="#">Gallery</a>
          </li>
          <li>
            <a href="#" class="m-0">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
    
  <div class="copy">
    <a href="#home" class="move-top"></a>
    <p>Copyright © 2019.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
  </div>
</div>
<!-- 底部end -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>